<template>
	<view class="contain appBgc">
		<view class="menuItem" v-for="(item,index) in newsList" :key="index" @click="navTo(index)">
			<view class="imgBox">
				<image :src="item.icon" mode="widthFix"></image>
			</view>
			<view class="titleBox">{{item.Title}}</view>
			<view class="newsNum" v-if="systemNotReadMsg&&item.Title=='系统消息'">{{systemNotReadMsg}}</view>
			<view class="newsNum" v-if="newsPostNotRead&&item.Title=='消息推送'">{{newsPostNotRead}}</view>
			<view class="newsNum" v-if="evaluationNotReadMsg&&item.Title=='评论消息'">{{evaluationNotReadMsg}}</view>		
		</view>
	</view>
</template>

<script>
	import { getNews } from '@/api/homePage.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				systemNotReadMsg:0,
				newsPostNotRead:0,
				evaluationNotReadMsg:0,
				newsList:[
					{Title:'系统消息',icon:'../../static/images/new_icon1.png'},
					// {Title:'消息推送',icon:'../../static/index-static/new_icon2.png'},
					// {Title:'评论消息',icon:'../../static/index-static/new_icon3.png'},
				]
			};
		},
		computed: {
		},
		mounted() {
		},
		onLoad() {			
		},
		methods: {
			// 未读消息
			async getTotalnews(){
				try{
					uni.showLoading({
						title:'加载中...'
					});
					const { Data }= await getNews({
			
					});
					uni.hideLoading();
					this.systemNotReadMsg=Data.NotReadMessageCount;
				}catch(e){
					//TODO handle the exception
				}
			},
			navTo(index){
				switch (index){
					case 0:
						uni.navigateTo({
							url:`/user_subpages/userCenter/newsDetail`
						})
						break;
					case 1:
						console.log(11);
						break;
					case 2:
						console.log(121);
						break;
				}
				
			}
		},
		onShow() {
			this.getTotalnews();
		}
	};
</script>

<style lang="scss" scoped>
page{position: relative;min-height: 100vh;background-color: #E9E9E9;}
.contain{
	padding: 20rpx;
	.menuItem{
		width: 100%;
		height: 140rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		margin: 10rpx 0 20rpx;
		background-color: #fff;
		.imgBox{
			width: 80rpx;
			height: 80rpx;
			image{
				width: 100%;
			}
		}
		.titleBox{
			width: calc(100% - 150rpx);
			text-align: left;
			font-weight: 600;
			font-size: 34rpx;
			margin-left: 20rpx;
		}
		.newsNum{
			padding: 0 6rpx;
			min-width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
			text-align: center;
			background-color: red;
			color: #fff;
			font-size: 28rpx;
			font-weight: 600;
		}
	}
}
</style>
